<template>
  <view class="container">
    <view class="content-header" style="justify-content: flex-end;">
      <uni-icons type="arrow-left" size="22" color="#fba007" @click="toMusicInfo"></uni-icons>
      <view class="content-header-return" @click="toMusicInfo">歌单</view>
      <view style="flex: 1;"></view>
      <input type="text" v-model="inputValue" v-show="showInput" placeholder="请输入歌名或歌手名" />
      <uni-icons type="search" size="22" color="#fba007" v-if="songSheetList == -1"
        @click="searchMusicMyList"></uni-icons>
    </view>
    <view class="content-headerTwo">
      <image src="../../static/music_icons/stop.svg" @click="addMusicMyList"></image>
      <view class="content-header-play" @click="addMusicMyList">播放全部</view>
      <text v-if="songSheetList == -1">{{'(' + filteredSongs.length + ')'}}</text>
      <text v-if="songSheetList == -2">{{'(' + recentPlayList.length + ')'}}</text>
      <text
        v-if="songSheetList <=5 && songSheetList >=0 && songSheetList != undefined">{{'(' + musicLists[songSheetList].length + ')'}}</text>
      <view style="flex: 1;"></view>
      <text class="delete-all" v-if="songSheetList == -1 && deleteIcon" @click="deleteComplete">完成</text>
      <text class="delete-all" v-if="songSheetList == -1 && deleteIcon" @click="deleteAllMyList">全部删除</text>
      <uni-icons type="trash" size="18" color="#ccc" @click="deleteMusicList"
        v-if="songSheetList == -1 || songSheetList == -2"></uni-icons>
    </view>

    <view class="content-title" v-show="songSheetList == -1 && filteredSongs.length<=0? true : false">你还没有喜欢的歌曲哦~
    </view>
    <view class="content-title" v-show="songSheetList == -2 && recentPlayList.length<=0? true : false">你最近没有听歌哦~
    </view>

    <!-- 展示推荐歌单 -->
    <scroll-view class="content-musiclist" scroll-y v-show="songSheetList !== -1 && songSheetList !== -2? true : false">
      <view class="musiclist-item" v-for="(item, i) in musicLists[songSheetList]" :key="i" @click="addPlayList(item)">
        <text>{{i + 1}}</text>
        <image class="musiclist-cover" :src="item.imgUrl"></image>
        <view class="musiclist-info">
          <view class="musiclist-info-title">{{item.title}}</view>
          <view class="musiclist-info-singer">{{item.singer}}</view>
        </view>
      </view>
    </scroll-view>
    <!-- 展示我的歌单 -->
    <scroll-view class="content-musiclist" scroll-y v-show="songSheetList == -1? true : false">
      <view class="musiclist-item" v-for="(item, i) in filteredSongs" :key="i">
        <view class="musiclist-item-left" @click="addPlayList(item)">
          <text>{{i + 1}}</text>
          <image class="musiclist-cover" :src="item.imgUrl"></image>
          <view class="musiclist-info">
            <view class="musiclist-info-title">{{item.title}}</view>
            <view class="musiclist-info-singer">{{item.singer}}</view>
          </view>
        </view>
        <uni-icons class="musiclist-icon" type="closeempty" size="18" color="#ddd" v-show="deleteIcon"
          @click="deleteMyListItem(item)"></uni-icons>
      </view>
    </scroll-view>
    <!-- 展示最近播放歌单 -->
    <scroll-view class="content-musiclist" scroll-y v-show="songSheetList == -2? true : false">
      <view class="musiclist-item" v-for="(item, i) in recentPlayList" :key="i" @click="addPlayList(item)">
        <text>{{i + 1}}</text>
        <image class="musiclist-cover" :src="item.imgUrl"></image>
        <view class="musiclist-info">
          <view class="musiclist-info-title">{{item.title}}</view>
          <view class="musiclist-info-singer">{{item.singer}}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "music-list",
    computed: {
      ...mapState('m_music', ['audioCtx', 'playList', 'musicList', 'musicLists', 'musicMyList', 'recentPlayList',
        'songSheetList',
        'audioState',
        'playIndex', 'playInfo'
      ])
    },
    data() {
      return {
        showInput: false, // 搜索框显示隐藏标志
        inputValue: '', // 用户输入的关键字
        filteredSongs: [], // 过滤后的歌曲列表
        deleteIcon: false, // 我喜欢的音乐列表删除图标显示隐藏标志
      };
    },
    mounted() {
      // 页面加载时，手动调用一次过滤函数，展示 musicMyList 数组
      this.filterSongs();
    },
    watch: {
      // 监听musicMyList歌单数据
      musicMyList(newMusicMyList) {
        this.filterSongs();
      },
      // 监听搜索框关键词内容
      inputValue(newInputValue) {
        this.filterSongs();
      }
    },

    methods: {
      ...mapMutations('m_music', ['updateItem', 'setMusic', 'setState', 'audioWait', 'updateToPlayList', 'emptyRecentPlayList', 'addToPlayList', 'updateSongSheetList', 'updateUserMusicList'
      ]),
      // 点击跳转到推荐歌单事件
      toMusicInfo() {
        this.showInput = false // 隐藏搜索框
        this.inputValue = '' // 清除搜索框内容
        this.deleteIcon = false // 隐藏删除按钮
        this.updateSongSheetList('null') // 重置songSheetList标志
        this.$emit('data-updated');
      },
      // 点击添加歌曲到播放列表 PlayList 中
      addPlayList(musicItem) {
        this.updateToPlayList(musicItem)
        if (musicItem.title !== this.playInfo.title) {
          this.setMusic(this.playIndex + 1)
          this.audioCtx.play()
          this.setState('running')
          this.audioWait()
        }
        if (musicItem.title == this.playInfo.title) {
          this.audioCtx.play()
          this.setState('running')
        }
        this.updateItem(1)
      },
      // 点击 "播放全部" 按钮将我的歌单数据全部添加进播放列表
      addMusicMyList() {
        if (this.songSheetList == -1) {
          if (this.filteredSongs.length <= 0) {
            return uni.$showMsg('列表中暂无数据！')
          }
          this.addToPlayList(this.filteredSongs)
        } else if (this.songSheetList == -2) {
          if (this.recentPlayList.length <= 0) {
            return uni.$showMsg('列表中暂无数据！')
          }
          this.addToPlayList(this.recentPlayList)
        } else {
          if (this.musicLists[this.songSheetList].length <= 0) {
            return uni.$showMsg('列表中暂无数据！')
          }
          this.addToPlayList(this.musicLists[this.songSheetList])
        }
        if (this.playInfo.title === '' && this.audioState === 'paused') {
          this.setMusic(0)
          this.audioCtx.play()
          this.setState('running')
          this.audioWait()
        }
        return uni.$showMsg('已经加入播放列表啦~')
      },
      // 点击 "删除" 图标清空歌单所有数据
      deleteMusicList() {
        if (this.songSheetList == -1) {
          if (this.filteredSongs.length <= 0) {
            return uni.$showMsg('列表中暂无数据！')
          }
          this.deleteIcon = true
        } else if (this.songSheetList == -2) {
          if (this.recentPlayList.length <= 0) {
            return uni.$showMsg('列表中暂无数据！')
          }
          this.deleteAllMyList()
        }
      },

      // 点击 "删除" 按钮删除我的歌单中的对应数据
      async deleteMyListItem(musicItem) {
        const index = this.filteredSongs.indexOf(musicItem)
        if (index !== -1) {
          this.filteredSongs.splice(index, 1)
        }
        // 准备参数
        var token = uni.getStorageSync('token')
        const music = musicItem
        const query = {
          token,
          music,
        }
        const {
          data: res
        } = await uni.$http.post('/api/update/music', query)
        if (res.meta.status !== 200) return uni.$showMsg('操作失败')
        this.updateUserMusicList(res.message)
      },

      // 清空我的歌单列表事件
      deleteAllMyList() {
        uni.showModal({
          'icon': 'none',
          'title': '确定要清空你的歌单吗？',
          success: (res) => {
            if (res.confirm) {
              // 用户点击了确定按钮
              if (this.songSheetList == -1) {
                // 清空我喜欢的歌单数据
                this.filteredSongs = []
                this.emptyMusicMyList()
                this.deleteIcon = false
              } else if (this.songSheetList == -2) {
                // 清空最近播放的歌单数据
                this.emptyRecentPlayList()
              }
            } else if (res.cancel) {
              // 用户点击了取消按钮
              this.deleteIcon = false
              return
            }
          }
        })
      },
      // 清空我喜欢的音乐列表事件
      async emptyMusicMyList() {
        // 准备参数
        var token = uni.getStorageSync('token')
        const query = {
          token,
        }
        const {
          data: res
        } = await uni.$http.post('/api/empty/music', query)
        if (res.meta.status !== 200) return uni.$showMsg('操作失败')
        this.updateUserMusicList(res.message)
      },
      // 点击 "完成" 退出删除操作
      deleteComplete() {
        this.deleteIcon = false
      },

      // 点击 "搜索" 按钮搜索我的歌单数据
      searchMusicMyList() {
        if (this.inputValue == '' && this.showInput === 'true') {
          return uni.$showMsg('请输入搜索内容！')
        }
        if (this.showInput === 'true' && this.filteredSongs.length <= 0) {
          return uni.$showMsg('列表中暂无数据！')
        }
        this.showInput = 'true'
      },

      // 根据用户输入的搜索关键词过虑我的歌单数据
      filterSongs() {
        if (!this.inputValue) {
          // 如果没有输入内容，则展示原来的 musicMyList 数组
          this.filteredSongs = this.musicMyList;
        } else {
          // 否则，重新过滤歌曲列表
          this.filteredSongs = this.musicMyList.filter(item => {
            const lowerCasedinputValue = this.inputValue.toLowerCase();
            return item.title.toLowerCase().includes(lowerCasedinputValue) || item.singer.toLowerCase().includes(
              lowerCasedinputValue);
          });
        }
      }
    }
  }
</script>

<style lang="scss">
  .container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 82rpx);

    .content-title {
      font-size: 12pt;
      color: #ccc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .content-header {
      display: flex;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 14rpx;
      margin-top: 10rpx;

      .content-header-return {
        font-size: 12pt;
        color: #fba007;
        margin-left: 4rpx;
      }
    }

    .content-header>input {
      width: 44%;
      border: 2px solid #fba007;
      border-radius: 25px;
      margin: 3rpx 6rpx 0 auto;
      padding-left: 20rpx;
      color: black;
      font-size: 10pt;
    }

    .content-headerTwo {
      display: flex;
      height: 60rpx;
      line-height: 60rpx;
      padding-right: 16rpx;
      padding-left: 10rpx;
      margin-top: 10rpx;

      .content-header-play {
        font-size: 11pt;
        color: black;
        font-weight: 600;
        margin: 2rpx;
        padding: 0rpx 10rpx 0rpx 16rpx;
      }
    }

    .content-headerTwo>image {
      width: 8%;
      height: 80%;
      margin: auto 0;
    }

    .content-headerTwo>text {
      font-size: 9pt;
      color: #ccc;
    }

    .delete-all {
      height: 42rpx;
      line-height: 42rpx;
      font-size: 10pt;
      border-right: 2px solid #ccc;
      margin-top: 10rpx;
      margin-right: 8rpx;
      padding-right: 12rpx;
    }

    .content-musiclist {
      flex: 1;
      overflow-y: auto;

      .musiclist-item {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #ddd;
        height: 112rpx;

        .musiclist-item-left {
          width: 100%;
          height: 112rpx;
          display: flex;
          align-items: center;
        }
      }

      .musiclist-item:last-child {
        border-bottom: 0;
      }

      .musiclist-item>text {
        width: 76rpx;
        text-align: center;
        font-size: 10pt;
        color: #ccc;
      }

      .musiclist-item-left>text {
        width: 76rpx;
        text-align: center;
        font-size: 10pt;
        color: #ccc;
      }

      .musiclist-cover {
        width: 80rpx;
        height: 80rpx;
        border-radius: 8rpx;
      }

      .musiclist-info {
        flex: 1;
        font-size: 10pt;
        line-height: 38rpx;
        margin-left: 20rpx;

        .musiclist-info-singer {
          color: #888;
        }
      }

      .musiclist-icon {
        margin-right: 16rpx;
      }
    }
  }
</style>